

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:light_image/commom/commom.dart';
import 'package:shared_preferences/shared_preferences.dart';

import 'login_page.dart';

class GuidePage extends StatefulWidget {
  createState()=>GuidePage_State();
//  @override
//  State<StatefulWidget> createState() {
//    return new GuidePage_State();
//  }
}

class GuidePage_State extends State<GuidePage> with WidgetsBindingObserver {
  //前后台切换：  监听页面生命周期的变化(注意：只有后台/前台切换的时候才会触发)
  AppLifecycleState appLifecycleState;

  //按钮点击变色--设置一个state值，按下的时候和抬起改变（跟react的state一样）
  bool isClicking1 = false;

  //屏幕的宽高
  double width;
  double height;

  //状态栏的高度
  double statebar_height;
  int pageViewIndex = 0;

  @override
  void initState() {
    super.initState();
    print("测试执行啊0");
    am();
    print("测试执行啊4");
//  前后台切换1：注册生命周期的监听器
    WidgetsBinding.instance.addObserver(this);
  }

  void am() async{
    print("测试执行啊1");
    await     print("测试执行啊2");
    print("测试执行啊3");
  }


  //Pageview的使用
  PageView getPageView() {
    PageView pageView;
    PageController pageController;

    pageController = new PageController();
    var     images = [
      "assets/images/guide1.png",
      "assets/images/guide2.png",
      "assets/images/guide3.png",
      "assets/images/guide4.png"
    ];
    //加载asset目录下的图片===在项目中新建一个images文件夹，然后把文件放进去，在pubspec.yaml里面配置如下
    //  assets:
    //  - images/welcome1.png
    //调用使用 Image.Asset('images/a.png')或者下面的new AssetImage('images/a.png')
    pageView = new PageView.builder(
      itemBuilder: (context, index) {
        return new ConstrainedBox(
          child: new Image(
            image: new AssetImage(images[index]),
            fit: BoxFit.fill,
          ),
          constraints: new BoxConstraints.expand(),
        );
      },
      itemCount: images.length,
      scrollDirection: Axis.horizontal,
      reverse: false,
      //是右侧下一个还是左侧下一个
      controller: pageController,
      onPageChanged: (index) {
        print('点击滚动到的位置' + index.toString());
        setState(() {
          pageViewIndex = index;
          if(pageViewIndex==images.length-1){
            text="进入";
          }else{
            text="跳过";
          }
        });
      },
      physics: PageScrollPhysics(parent: BouncingScrollPhysics()),
    );
    return pageView;
  }

  @override
  void dispose() {
    // 前后台切换3：销毁的注销他
    WidgetsBinding.instance.removeObserver(this); //取消监听 
    super.dispose();
  }

  //关于生命周期,注意 下面的方法只有页面到后台/前台切换时才会触发
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    print('didChangeAppLifecycleState' + state.toString());
    // 前后台切换2：前台后切换触发了
    setState(() {
      appLifecycleState = state;
    });
  }

  //StateFulWidget更新state，从而更新UI
  void upDataButtonState(bool clicked) {
    setState(() {
      isClicking1 = clicked;
    });
  }
  String text="跳过";
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    //获取屏幕的尺寸信息：注意  只能写在这个方法，不能写在initstate
    //需要导入的包  import 'dart:ui';
    width = MediaQuery.of(context).size.width;
    height = MediaQuery.of(context).size.height;
    statebar_height = MediaQuery.of(context).padding.top;
    print('手机信息' +
        width.toString() +
        "/" +
        height.toString() +
        "/" +
        statebar_height.toString());
    //stack布局:后进后显示原则。设置绝对定位使用Positined left top bottom right实现上下左右间距，可以只设置一个
    return new Scaffold(
        body: new Stack(
          children: <Widget>[
            //图片显示
            new Positioned(
              child: getPageView(),
              left: 0,
              right: 0,
              top: 0,
              bottom: 0,
            ),
            //跳过按钮
            new Positioned(
              //给view添加点击事件，使用GestureDetector便签包裹
              child: new GestureDetector(
                child: new Container(
                  padding:
                  const EdgeInsets.only(left: 10, top: 2, right: 10, bottom: 2),
                  decoration: new ShapeDecoration(
                    color: !isClicking1 ? Colors.white : Color(0xff898989),
                    shape: StadiumBorder(
                        side: BorderSide(
                            color: Color(0xff898989),
                            style: BorderStyle.solid,
                            width: 1)),
                  ),
                  child: new Text(text),
                ),
                onTap: () {
                  var prefs =     SharedPreferences.getInstance();
                  prefs.then((onValue){
                    onValue.setBool('Guided', true);
                  });
                  pushAndRemoveUntil(LoginPage(), RouterType.material);
                  print('触发跳过');
                },
                onTapUp: (TapUpDetails) {
                  print('触发onTapUp');
                  upDataButtonState(false);
                },
                onTapDown: (TapUpDetails) {
                  print('触发onTapDown');
                  upDataButtonState(true);
                },
                onTapCancel: () {
                  print('触发onTapCancel');
                  upDataButtonState(false);
                },
              ),
              top: 10 + statebar_height,
              right: 10,
            ),
            /*完成进入*/
            new Positioned(
              child: new GestureDetector(
//             child: Image.asset('assets/images/entries_2.png'),
                onTap: () {
                  var prefs =     SharedPreferences.getInstance();
                  prefs.then((onValue){
                    onValue.setBool('Guided', true);
                  });
                  print('点击了立即开启');
                },
              ),
              height: pageViewIndex == 2 ? width / 10 : 0,
              bottom: width / 10 - 2,
              left: 0,
              right: 0,
            )
          ],
        ));
  }
}